<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>杨玉龙的网站</title>
		<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
		<link rel="stylesheet" href="./css/index.css">
		<!-- Mobile端跳转 -->
		<!-- <script>
			if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
				window.location.href ="./m_index.html";//手机
			}
		</script> -->
		
	</head>
	<body id="body"> 
		<div class="top_img">
			<div class="button">
				<div id="button1" class="button1" style="cursor: pointer;">
					联系我
				</div>
				<div id="button2" class="button2" style="cursor: pointer;">
					
				</div>
				<div id="button3" class="button3" style="cursor: pointer;">

				</div>   
			</div>
		</div> 
		<div class="hezi">
			<a href="welcome.html" target="_blank" title="点击了解更多...">
				<div id="yyl_logogo" class="yyl_logo">
				</div>
			</a>
			<div class="name">
				<h1 id="nam">杨玉龙</h1>
			</div>
			<div class="title">
<!--				<p id="titl">一个Web技术爱好者<p>-->
				<p id="titl">一个DIY技术玩家<p>
			</div>
		</div>
		<div class="hezi" style="height: 40px;">
			<div class="map_link">
				<div class="nav">
					<!-- Home -->
					<h3 id="nav_Home">Home</h3>
					<!-- Log -->
					<h3 id="nav_Detail" style="border: none;">Log</h3>
					<!-- About -->
					<h3 id="nav_Note" style="border: none;">About</h3>
				</div>
				<!-- <hr> -->
			</div>
		</div>	
		<hr id="h"/>
		<!-- ----------------导航栏下内容显示区域start--------------------- -->
		<!-- 1.Home页面 -->
		<div class="hezi1" id="Home" style="display: block;">
			<div class="content">
				<h5 class="title">我的作品</h5>

				<div class="project">

					<div class="pro_logo">
						<a href="https://gitee.com/webyyl" target="_blank">
							<img src="./pro_logo/Electrical%20Cabinet.jpg" alt="">
						</a>

					</div>

					<div class="pro_more">
						<div class="pro_miaoshu">
							<p id="p3"><b>Electrical Cabinet</b>: 快速搭建自己的电气环境. </p>
						</div>
						<div class="link_logo">
							<a href="https://gitee.com/webyyl" target="_blank"><img src="./logos/link.png" title="访问 & 体验" ></a>
							<a href="https://gitee.com/webyyl" target="_blank"><img src="./logos/github.png" title="gitee的仓库地址"></a>
						</div>
					</div>
				</div>

				<div class="project">

					<div class="pro_logo">
						<a href="https://gitee.com/webyyl" target="_blank">
							<img src="./pro_logo/easytoyolo.png" alt="">
						</a>

					</div>

					<div class="pro_more">
						<div class="pro_miaoshu">
							<p id="p3"><b>Easy to Yolo</b>: 方便易用的目标识别框架. </p>
						</div>
						<div class="link_logo">
							<a href="https://gitee.com/webyyl" target="_blank"><img src="./logos/link.png" title="访问 & 体验" ></a>
							<a href="https://gitee.com/webyyl" target="_blank"><img src="./logos/github.png" title="gitee的仓库地址"></a>
						</div>
					</div>
				</div>


				<div class="project">

					<div class="pro_logo">
						<a href="https://gitee.com/webyyl" target="_blank">
							<img src="./pro_logo/GustureControl.PNG" alt="">
						</a>

					</div>

					<div class="pro_more">
						<div class="pro_miaoshu">
							<p id="p3"><b>GustureControlTools</b>: 基于Mediapipa的手势识别控制鼠标和键盘. </p>
						</div>
						<div class="link_logo">
							<a href="https://gitee.com/webyyl" target="_blank"><img src="./logos/link.png" title="访问 & 体验" ></a>
							<a href="https://gitee.com/webyyl" target="_blank"><img src="./logos/github.png" title="gitee的仓库地址"></a>
						</div>
					</div>
				</div>


				<div class="project">

					<div class="pro_logo">
						<a href="https://gitee.com/webyyl/esp32" target="_blank">
							<img src="./pro_logo/esp32.jpg" alt="">
						</a>

					</div>

					<div class="pro_more">
						<div class="pro_miaoshu">
							<p id="p3"><b>HomeESP32</b>: 基于ESP32开发的控制组件. </p>
						</div>
						<div class="link_logo">
							<a href="https://gitee.com/webyyl/esp32" target="_blank"><img src="./logos/link.png" title="访问 & 体验" ></a>
							<a href="https://gitee.com/webyyl/esp32" target="_blank"><img src="./logos/github.png" title="gitee的仓库地址"></a>
						</div>
					</div>
				</div>
				
				
				<div class="project">
					
					<div class="pro_logo">
						<a href="https://mastergo.com/file/73252945612686?inviteDocumentId=4ed12012-4651-4aaf-a73a-913f1d9ac9d2&inviteBatchId=77687036749510&page_id=M" target="_blank">
							<img src="./pro_logo/Macinbrowser.png" alt="">
						</a>
						
					</div>
					
					<div class="pro_more">
						<div class="pro_miaoshu">
							<p id="p3"><b>Mac in browser</b>: 在MasterGo中绘制的MacOS UI.</p>
						</div>
						<div class="link_logo">
							<a href="http://webyyl.gitee.io/macinbrowser/" target="_blank"><img src="./logos/link.png" title="访问 & 体验" ></a>
							<a href="https://gitee.com/webyyl/Macinbrowser" target="_blank"><img src="./logos/github.png" title="gitee的仓库地址"></a>
						</div>
					</div>
				</div>
				
				<div class="project">
					
					<div class="pro_logo">
						<a href="http://webyyl.gitee.io/screw_finding/" target="_blank">
							<img src="./pro_logo/螺丝库位查询系统.png" alt="">
						</a>
						
					</div>
					
					<div class="pro_more">
						<div class="pro_miaoshu">
							<p id="p2"><b>料架螺丝库位查询系统</b>: 即时在线的工厂料架螺丝库位查询服务. </p>
						</div>
						<div class="link_logo">
							<a href="http://webyyl.gitee.io/screw_finding/" target="_blank"><img src="./logos/link.png" title="访问 & 体验" ></a>
							<a href="https://gitee.com/webyyl/Screw_Finding" target="_blank"><img src="./logos/github.png" title="gitee的仓库地址"></a>
						</div>
					</div>
				</div>
				
				<div class="project">
					
					<div class="pro_logo">
						<a href="https://webyyl.gitee.io/spacezine" target="_blank">
							<img src="./pro_logo/Spacemagazine.png" alt="">
						</a>
						
					</div>
					
					<div class="pro_more">
						<div class="pro_miaoshu">
							<p id="p1"><b>Space magazine</b>: 一个和火箭、卫星有关的航天发烧友网站！ </p>
						</div>
						<div class="link_logo">
							<a href="https://webyyl.gitee.io/spacezine" target="_blank"><img src="./logos/link.png" title="访问 & 体验" ></a>
							<a href="https://gitee.com/webyyl/spacezine" target="_blank"><img src="./logos/github.png" title="gitee的仓库地址"></a>
						</div>
					</div>
				</div>
				
				<div class="project">
					<div class="pro_logo">
						<a href="./old_designing_programming.html" target="_blank">
							<img src="./pro_logo/apps.png" alt="">
						</a>
					</div>
					<div class="pro_more">
						<div class="pro_miaoshu">
							<p id="p0">其它作品：<a href="./old_designing_programming.html" target="_blank">早期的</a> | 
							<a href="./old_designing_programming.html" target="_blank">设计中</a>
							 | 
							<a href="./old_designing_programming.html" target="_blank">在开发</a>
							  的项目
							</p>
						</div>
						<div class="link_logo">
							<a href="" target="_blank"><img src="./logos/link.png" title="访问 & 体验" ></a>
							<a href="https://gitee.com/webyyl/front-end-resources" target="_blank"><img src="./logos/github.png" title="gitee的仓库地址"></a>
						</div>
					</div>
				</div>
				
				<!-- <div class="project" style="height: 300px;">
					<div class="pro_logo" style="width: 599px;height: 164.76px;border: 1px solid #E5E8EB;border-bottom: none;">
						<a href="https://gitee.com/webyyl/webyyl#yulong-yang%E7%9A%84%E4%B8%AA%E4%BA%BA%E4%B8%BB%E9%A1%B5" target="_blank">
							<img id="img1" src="./pro_logo/webyyl.png" alt="" style="width: 599px;height: 164.76px;">
						</a>
					</div>
					<div class="pro_more">
						<div class="pro_miaoshu">
							<p id="p3">关于这个网站 https://webyyl.gitee.io ，我猜你想知道的！ </p>
						</div>
						<div class="link_logo">
							<a href="https://gitee.com/webyyl/webyyl#yulong-yang%E7%9A%84%E4%B8%AA%E4%BA%BA%E4%B8%BB%E9%A1%B5" target="_blank"><img src="./logos/link.png" title="访问 & 体验"></a>
							<a href="https://gitee.com/webyyl" target="_blank"><img src="./logos/github.png" title="gitee的仓库地址"></a>
						</div>
					</div>
				</div> -->
				
			</div>
			
			<div class="message">
				<h2 id="m1">这个项目怎么样？</h2>
				<input id="inp1" class="your_name" placeholder="你的名字"/>
				<input id="inp2" class="your_message" placeholder="任何你想说的，项目相关的，或者..."/>
				<div class="duoxuan">
					<input id="" type="checkbox" name="" id="">
					仅我可见，不被其他用户查看到
				</div>
				<input id="send" class="send" type="button" value="发送" style="cursor: pointer;"/>
			</div>
		</div>
		
		<!-- 2.Detail页面 -->
		<div class="hezi1" id="Detail" style="display: none;">
			<div class="content">
				<h5 class="title">小破站日志</h5>
				
				<div class="project">
					
					<div class="pro_logo">
						<img src="./log/5_performance.png" alt="">
						
					</div>
					
					<div class="pro_more">
						<div class="pro_miaoshu">
							<p id="log5"><b style="font-size: 25px;">2022.11.16</b><b> 页面加载速度性能优化</b></p>
						</div>
					</div>
				</div>
				
				<div class="project">
					
					<div class="pro_logo">
						<img src="./log/4_dark.png" alt="">
						
					</div>
					
					<div class="pro_more">
						<div class="pro_miaoshu">
							<p id="log4"><b style="font-size: 25px;">2022.10.31</b><b> 新增深色主题</b></p>
						</div>
					</div>
				</div>
				
				<div class="project">
					
					<div class="pro_logo">
						<img src="./log/3_online.png" alt="">
						
					</div>
					
					<div class="pro_more">
						<div class="pro_miaoshu">
							<p id="log3"><b style="font-size: 25px;">2022.10.25</b><b> 开发完成并上线</b></p>
						</div>
					</div>
				</div>
				
				<div class="project">
					
					<div class="pro_logo">
						<img src="./log/2_tech.png" alt="">
						
					</div>
					
					<div class="pro_more">
						<div class="pro_miaoshu">
							<p id="log2"><b style="font-size: 25px;">2022.10.15</b><b> 技术方向选择与确定</b></p>
						</div>
					</div>
				</div>
				
				<div class="project">
					<div class="pro_logo">
						<img src="./log/1_ui.png" alt="">
					</div>
					<div class="pro_more">
						<div class="pro_miaoshu">
							<p id="log1"><b style="font-size: 25px;">2022.10.07</b><b> 所有UI设计图基本完成</b></p>
						</div>
						
					</div>
				</div>
				
			</div>
			
			<div class="message" style="height: 180px;">
				<h2 style="font-size: 14px;color: #717171;margin-top: 20px;">最受欢迎的版本</h2>
				<div id="inp3" style="height: 100px;" class="your_name" placeholder="你的名字">
					<h2 style="font-size: 14px;color: #717171;margin-left: 1px;margin-top: 1px;font-weight: 100;">技术方向选择与确定</h2>
					<img src="./logos/zan.png" alt=""> &nbsp;<e>3</e>
					<div style="width: 65px;height: 65px;margin-top: -75px;margin-left: 250px;">
					</div>
				</div>
			</div>
			
			<div class="message" style="height: 354px;margin-top: 30px;">
				<h2 style="font-size: 14px;color: #717171;margin-top: 20px;">技术栈</h2>
				<div id="inp4" style="height:275px;background-color: #fff;" class="your_name" placeholder="你的名字">
					<h2 style="font-size: 14px;color: #717171;margin-left: 1px;margin-top: 1px;font-weight: 100;height: 25px;">需求：MindMaster</h2>
					<h2 style="font-size: 14px;color: #717171;margin-left: 1px;margin-top: 1px;font-weight: 100;height: 25px;">设计：MasterGo</h2>
					<h2 style="font-size: 14px;color: #717171;margin-left: 1px;margin-top: 1px;font-weight: 100;height: 25px;">开发：HTML、CSS 、JavaScript</h2>
					<h2 style="font-size: 14px;color: #717171;margin-left: 1px;margin-top: 1px;font-weight: 100;height: 25px;">调试：Chrome - Developer Tools</h2>
					<h2 style="font-size: 14px;color: #717171;margin-left: 1px;margin-top: 1px;font-weight: 100;height: 25px;">测试：Chrome、Edge、Firefox、Safari</h2>
					<h2 style="font-size: 14px;color: #717171;margin-left: 1px;margin-top: 1px;font-weight: 100;height: 25px;">版本：Git</h2>
					<h2 style="font-size: 14px;color: #717171;margin-left: 1px;margin-top: 1px;font-weight: 100;height: 25px;">部署：Gitee Pages</h2>
					<h2 style="font-size: 14px;color: #717171;margin-left: 1px;margin-top: 1px;font-weight: 100;height: 25px;">平台：Windows、Hbuilder X、Chrome</h2>
					<h2 style="font-size: 14px;color: #717171;margin-left: 1px;margin-top: 1px;font-weight: 100;height: 25px;">仓库：<a href="https://gitee.com/webyyl/webyyl" target="_blank">https://gitee.com/webyyl/webyyl</a></h2>
					<h2 style="font-size: 14px;color: #717171;margin-left: 1px;margin-top: 1px;font-weight: 100;height: 25px;">主页：<a href="https://gitee.com/webyyl">http://webyyl.gitee.io/</a></h2>
				</div>
			</div>
		</div>
		
		
		<!-- 3.Note页面 -->
		<div class="hezi1" id="Note" style="display: none;">
			<div class="content" style="margin-bottom: 10px;">
				<h5 class="title">关于我</h5>
				<div class="project" style="margin-bottom: 130px;">
					
					<div class="pro_more" style="border: 1px solid #E5E8EB;height: 60px;margin-bottom: 20px;color: #7d7f7d;">
							<div class="pro_miaoshu">
								<p style="margin-top: -5px;"><b title="如果你对我用英文这种方式感觉到不适,非常抱歉!因为自己长期在一家外企就职,日常看到的全是英文的东西,纯属习惯!">Hi. I am Yang,Yu Long.</b></p>
							</div>
					</div>
					<div class="pro_more" style="border: 1px solid #E5E8EB;height: 60px;margin-bottom: 20px;color: #7d7f7d;">
							<div class="pro_miaoshu">
								<p style="margin-top: -5px;"><b>一个寄予希望全平台通用技术早日到来的梦想家！ </b></p>
							</div>
					</div>
					<div class="pro_more" style="border: 1px solid #E5E8EB;height: 60px;margin-bottom: 20px;color: #7d7f7d;">
							<div class="pro_miaoshu">
								<p style="margin-top: -5px;"><b>使用Web技术以来，我从未考虑过用户的硬件与操作系统问题！</b></p>
							</div>
					</div>
					<div class="pro_more" style="border: 1px solid #E5E8EB;height: 60px;margin-bottom: 20px;color: #7d7f7d;">
							<div class="pro_miaoshu">
								<p style="margin-top: -5px;"><b>正是看中了Web技术的跨平台、对开发者极其友好的特性，尤为忠爱！</b></p>
							</div>
					</div>
					<div class="pro_more" style="border: 1px solid #E5E8EB;height: 60px;margin-bottom: 20px;color: #7d7f7d;">
							<div class="pro_miaoshu">
								<p style="margin-top: -5px;"><b>一次开发处处运行的时代一定会来临的！</b></p>
							</div>
					</div>
					<div class="pro_more" style="border: 1px solid #E5E8EB;height: 60px;margin-bottom: 20px;color: #7d7f7d;">
							<div class="pro_miaoshu">
								<p style="margin-top: -5px;"><b>当前正着手桌面应用全线转移到Web.</b></p>
							</div>
					</div>
					<div class="pro_more" style="border: 1px solid #E5E8EB;height: 60px;margin-bottom: 20px;color: #7d7f7d;">
							<div class="pro_miaoshu">
								<p style="margin-top: -5px;"><b>我只是一个Web技术爱好者！</b></p>
							</div>
					</div>
					<!-- <div style="height: 100px;">1</div> -->
					<!-- <input id="more" class="send" style="height: 48px;width: 600px;margin-left: 0px;background-color: #F4F4F4;color: #000;cursor: pointer;" type="button" value="查看更多" title="此功能暂未开放"/> -->
				</div>
				
				<div class="project" style="height: 300px;">
					<div class="pro_logo" style="width: 599px;height: 164.76px;border: 1px solid #E5E8EB;border-bottom: none;">
						<a href="https://gitee.com/webyyl/webyyl#yulong-yang%E7%9A%84%E4%B8%AA%E4%BA%BA%E4%B8%BB%E9%A1%B5" target="_blank">
							<img id="img1" src="./pro_logo/webyyl.png" alt="" style="width: 599px;height: 164.76px;">
						</a>
					</div>
					<div class="pro_more">
						<div class="pro_miaoshu">
							<p id="about_website">关于这个网站 https://webyyl.gitee.io ，我猜你想知道的！ </p>
						</div>
						<div class="link_logo">
							<a href="https://gitee.com/webyyl/webyyl#yulong-yang%E7%9A%84%E4%B8%AA%E4%BA%BA%E4%B8%BB%E9%A1%B5" target="_blank"><img src="./logos/link.png" title="访问 & 体验"></a>
							<a href="https://gitee.com/webyyl" target="_blank"><img src="./logos/github.png" title="gitee的仓库地址"></a>
						</div>
					</div>
				</div>
				
				
			</div>
			
			<div class="message" style="height: 310px;">
				<h2 style="font-size: 14px;color: #717171;margin-top: 20px;">异想天开(非技术类)</h2>
				<a href="https://flowus.cn/share/b4f02907-6f74-44dd-b8b3-c012fcb2a9ea" target="_blank">
					<div id="inp5" style="height: 100px;" class="your_name">
						<h2 style="font-size: 14px;color: #717171;margin-left: 1px;margin-top: 1px;font-weight: 100;">电动汽车彻底取代燃油车的可能性探究...</h2>
						<img src="./logos/zan.png" alt=""> &nbsp;<e>3</e>
						<div style="width: 65px;height: 62px;margin-top: -75px;margin-left: 250px;">
							<!-- <img src="./note/csdn.png" alt=""> -->
						</div>
					</div>
				</a>
				<a href="https://flowus.cn/share/6d5275f6-07a2-442b-9d0f-2df40767d61e" target="_blank">
					<div id="inp6" style="height: 100px;" class="your_name">
						<h2 style="font-size: 14px;color: #717171;margin-left: 1px;margin-top: 1px;font-weight: 100;">如果中国真的抓住了这次电动汽车工业崛起机遇...</h2>
						<img src="./logos/zan.png" alt=""> &nbsp;<e>3</e>
						<div style="width: 65px;height: 62px;margin-top: -75px;margin-left: 250px;">
							<!-- <img src="./note/csdn.png" alt=""> -->
						</div>
					</div>
				</a>
			</div>
			
			
		</div>
		
		<!-- ----------------导航栏下内容显示区域end--------------------- -->
		
		<div class="footer">
			<!-- Designed by -->
			<img id="foot" src="./logos/footer.png" alt="">
		</div>
		
		<script src="js/index.js"></script>
		
	</body>
</html>